<script setup lang='ts'>
import { ref } from 'vue';
import ShowCase from './components/IfShowCase.vue';
import EventCase from './components/03_vue3事件传递参数.vue'
import BindCase from './components/04_vue3的属性绑定.vue'
import ModelCase from './components/06_vue3中的双向绑定.vue'
import CompnentCase from './components/07_vue3中的计算属性.vue'
import ExampleCase from './components/12_综合案例.vue'

import HmHeader from './components/HmHeader.vue';
import HmBody from './components/HmBody.vue';
import HmFooter from './components/HmFooter.vue';

import Parent from './components/13_父子通信中的父组件.vue'
import GrandFather from './components/15_跨代传值的爷爷组件.vue'
import SlotCases from './components/18_vue3中的默认插槽技术.vue'

import SlotCase from './components/19_具名插槽的用法.vue'
import HmTable from './components/20_作用域插槽的使用.vue'
type PersonColumnArr = Array<{ lable: string, field: keyof Person }>
type PersonArr = Array<{ id: number, username: string, age: number }>
type Person = { id: number, username: string, age: number }
const columns: PersonColumnArr = [
    { lable: "序号", field: "id" },
    { lable: "姓名", field: "username" },
    { lable: "年龄", field: "age" },
    { lable: "操作", field: "" as keyof Person }
]
const data = ref<PersonArr>([
    { id: 1, username: "张三", age: 18 },
    { id: 2, username: "李四", age: 19 },
    { id: 3, username: "王五", age: 20 },
])
const delRow = (row: { id: number, username: string, age: number }) => {
    data.value = data.value.filter(item => item.id !== row.id)
}

</script>

<template>
    <!-- <ShowCase></ShowCase> -->
    <!-- <show-case></show-case> -->
    <!-- <EventCase></EventCase> -->
    <!-- <BindCase></BindCase> -->
    <!-- <ModelCase></ModelCase> -->
    <!-- <CompnentCase></CompnentCase> -->
    <!-- <ExampleCase></ExampleCase> -->
    <!-- <div class="container">
        <HmHeader></HmHeader>
        <HmBody></HmBody>
        <HmFooter></HmFooter>
    </div> -->

    <!-- <Parent></Parent> -->
    <!-- <GrandFather></GrandFather> -->

    <!-- <SlotCases>
        <h1>传入数据</h1>
    </SlotCases> -->
    <!-- <SlotCase>
        <template #header>
            <h1>头部内容</h1>
        </template>
<template #body>
            <h1>主体内容</h1>
        </template>
<template #footer>
            <h1>底部内容</h1>
        </template>
</SlotCase> -->


    <!-- <HmTable :columns="columns" :data="data">
        <template #row="obj">
            <button>编辑</button>
            <button @click="delRow(obj.row)">删除</button>
        </template>
    </HmTable> -->

    <div class="container">
        <!-- 一级路由容器 -->
        <div class="nav">
            <router-link to="/home">去主页</router-link>
            <router-link to="/login">去登录</router-link>
        </div>
        <router-view></router-view>
    </div>

</template>

<style scoped>
.container {
    width: 50%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: pink;
}

.nav a {
    margin-left: 10px;
    text-decoration: none;
}

.router-link-active {
    font-size: 30px;
}
</style>